<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <div class="gateway-l-content" :class="getClass"><BrandList @select="onSelection" /></div>
    <div class="w-2/5 gateway-l-content" v-show="showRight"
      ><BrandType :brandId="brand_id" @closeChange="closeChange" v-if="showRight"
    /></div>
  </PageWrapper>
</template>
<script>
  import { defineComponent, ref, unref, computed } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { triggerWindowResize } from '/@/utils/event';
  import BrandList from './brandlist/index.vue';
  import BrandType from './brandtype/index.vue';
  export default defineComponent({
    name: 'Brand',
    components: { PageWrapper, BrandList, BrandType },
    setup() {
      let brand_id = ref();
      let showRight = ref(false);
      let isResize = ref(false);
      const getClass = computed(() => [
        {
          ['w-3/5']: unref(showRight),
          ['w-5/5']: !unref(showRight),
        },
      ]);
      function onSelection(data) {
        brand_id.value = data.id ? data.id : null;
        showRight.value = !!data.id;
        if (!unref(isResize)) {
          isResize.value = true;
          triggerWindowResize();
        }
      }
      function closeChange() {
        showRight.value = false;
        console.log('哈哈哈哈哈哈');
      }
      return { getClass, showRight, onSelection, isResize, brand_id, closeChange };
    },
  });
</script>
<style lang="less">
  .gateway-l-content {
    margin: 10px 0 0 10px;
    &.w-4\/4 {
      margin-right: 10px;
    }
  }
</style>
